npm <template>
  <div class="sign">
    <h1 class="title">注册</h1>
    <div class="bd">
      <mt-field label="手机号" placeholder="请输入手机号" type="tel" v-model="phone"></mt-field>
      <mt-field label="验证码" placeholder="请输入验证码" v-model="captcha">
        <mt-button type="primary" size="small" @click="getSms">获取验证码</mt-button></mt-field>
      <mt-field label="密码" placeholder="请输入密码" type="password" v-model="password"></mt-field>
      <mt-field label="确认密码" placeholder="请再次输入密码" type="password" v-model="repassword"></mt-field>
      <hr align=center style="FILTER: alpha(opacity=100,finishopacity=0,style=3)" width="100%" color=#EFEDEF SIZE=0.5>
      <div class="addr">
        <label>默认地址</label>
        <mt-picker :slots="slots1" @change="onValuesChange" class="picker"></mt-picker>
        <mt-picker :slots="slots2" @change="onValuesChange" class="picker"></mt-picker>
      </div>
      <mt-field label="详细地址" placeholder="详细地址" type="address" v-model="address"></mt-field>
      <mt-button type="primary" size="large" @click="doReg">注册</mt-button>
    </div>
  </div>
</template>

<script type="text/javascript">
  import axios from 'axios';
  import {Toast} from 'mint-ui'

  export default {
    data() {
      return {
        phone:'15210652665',
        captcha:'',
        password:'mm123456',
        repassword:'',
        address:'北京市',
        slots1: [
          {
            flex: 1,
            values: ['北京市', '上海市'],
            className: 'slot1',
            textAlign: 'right'
          }, {
            divider: true,
            content: '-',
            className: 'slot2'
          }, {
            flex: 1,
            values: ['海淀区', '西城区'],
            className: 'slot3',
            textAlign: 'left'
          },{
            divider: true,
            content: '-',
            className: 'slot4'
          },{
            flex: 1,
            values: ['北下关街道', '新街口街道'],
            className: 'slot5',
            textAlign: 'left'
          },
          {
            divider: true,
            content: '-',
            className: 'slot6'
          }, {
            flex: 1,
            values: ['1小区','2小区'],
            className: 'slot7',
            textAlign: 'right'
          }
        ]
      };
    },
    methods: {
      onValuesChange(picker, values) {
        if (values[0] > values[1]) {
          picker.setSlotValue(1, values[0]);
        }
      },
      checkValidity(){
        let isValid = true

        if (!this.phone || !this.password) {
          Toast({
            message: this.phone ? '密码不能为空' : '手机号不能为空',
            duration: 1500
          });
          return false
        }

        if (!/^1[34578]\d{9}$/.test(this.phone)) {
          Toast({
            message: '手机号不合法',
            duration: 1500
          });
          isValid = false
        }

        if (!(/^.*(?=.{8,})(?=.*\d)(?=.*[a-zA-Z]).*$/).test(this.password)) {
          Toast({
            message: '密码长度需大于8位,且至少需要一个字母和一个数字',
            duration: 1500
          });
          isValid = false
        }

        return isValid
      },
      doReg(){
        /*
         ** 用户注册接口
         */
        let app = this;
        console.log(this.phone+this.password+this.address);
        // axios({
        //   method: 'post',
        //   url: 'http://20649hp003.iok.la:49036/RR_Consumer/user/reg',
        //   headers:{
        //     'Content-Type': 'application/json;charset=UTF-8'
        //   },
        //   data: {
        //       phone: this.phone,
        //       pwd: this.password,
        //       addr: this.address
        //   }
        // });
        // let paramReg = new URLSearchParams();
        // paramReg.append("phone", this.phone);
        // paramReg.append("pwd", this.password);
        // paramReg.append("addr",this.address);
        axios.get('http://20649hp003.iok.la:49036/RR_Consumer/user/reg',{
          params:{
            phone: this.phone,
            pwd: this.password,
            addr: this.address
          }
        }
        ).then(function(response){
          console.log('发送请求成功');
          console.log(response);
        }).catch(function (error){
          console.log(error);
        });
      },
      getSms(){

      }
    },
  };
</script>

<style>
  .sign {
    background-color: #fff;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
  }

  .title {
    font-family: "Quicksand", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* 1 */
    display: block;
    font-weight: 300;
    font-size: 25px;
    color: #35495e;
    letter-spacing: 1px;
    align-items: center;
    text-align: center;
    margin-top: 20px;
  }

  .bd {
    background-color: #fff;
    position: absolute;
    top: 12%;
    width: 86%;
    height: 76%;
    left: 7%;
  }

  .addr {
    width: 100%;
    text-align: left;
    margin-left: 10px;
  }

  .picker {
    width: 80%;
  }
</style>
